<template>
    <div>
        <div class="flex history">
            <div><p>历史已完成订单总金额</p><p>{{History_money}}元</p></div>
            <div><p>历史已完成订单</p><p>{{History_num}}单</p></div>
        </div>
        <section class="login_message">
            <mt-button class="btn" @click="popupVisible = !popupVisible">筛选</mt-button>
        </section>
        <div>
            <p class="order_title">历史订单</p>
            <div v-for="(item,index) of orderList" :key="index">
                <mt-cell :title="'订单编号:'+item.order_no"></mt-cell>
                <p class="order_cell">下单时间:{{ToTime(item.create_time)}}</p>
                <p class="order_cell flex">提货码:<span>{{item.code}}</span></p>
                <p class="order_cell flex">预期收入:<span>+<span class="money">{{item.store_price}}</span>元</span></p>
            </div>
            
            <p class="hint" v-if="!orderList.length">暂无{{start_date}}至{{end_date}}历史订单~</p>
        </div>
        <mt-popup
        v-model="popupVisible"
        class="inputBox"
        popup-transition="popup-fade">
            <section class="login_message">
                <p class="title">历史订单查询</p>
            </section>
            <section class="login_message">
                <input type="text" readonly @click="selectStatus" placeholder="请选择需要查询的订单状态">
            </section>
            <section class="login_message">
                <input type="text" readonly v-model="start_time" @click="openPicker" placeholder="请选择需要查询的订单开始日期">
            </section>
            <section class="login_message">
                <input type="text" readonly v-model="end_time" @click="openPic"  placeholder="请选择需要查询的订单结束日期">
            </section>
            <section class="login_message">
                <mt-button class="btn" @click="getOrderList">查询</mt-button>
            </section>
        </mt-popup>
        <template>
            <mt-datetime-picker
                ref="picker"
                type="date"
                v-model="start_time"
                @confirm="getStartTime">
            </mt-datetime-picker>
            <mt-datetime-picker
                ref="pic"
                type="date"
                v-model="end_time"
                @confirm="getEndTime">
            </mt-datetime-picker>
            <mt-popup
            v-model="statusCheckBox"
            position="bottom">
                <div class="btn_group"><button @click="()=>{this.statusCheckBox = !this.statusCheckBox}">确认</button></div>
                <mt-checklist
                title="选择需要查看的订单状态"
                v-model="status"
                :max="1"
                :options="statusList">
                </mt-checklist>
            </mt-popup>
        </template>
    </div>
</template>
<script>
import {orderRecord} from '../api'
import timestampToTime from '../time'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            History_money:0,
            History_num:0,
            status:[0],
            statusCheckBox:false,
            orderList:[],
            statusList:[    
                    {value:"0",label:'已下单'},
                    {value:"1",label:'已接单'}, 
                    {value:"2",label:'等待配送'},
                    {value:"3",label:'已配送'},
                    {value:"4",label:'已送达'},
                    {value:"5",label:'已签收'},
                    {value:"6",label:'已评价'},
                    {value:"-1",label:'等待退款'},
                    {value:"-2",label:'已退款'},
                    {value:"-3",label:'拒绝退款'},
                    {value:"-4",label:'取消订单'}
                ],
            popupVisible:false,
            start_time:"",
            end_time:"",
            start_date:"",
            end_date:""

        }
    },
    created(){
        this.start_date = timestampToTime(new Date());
        this.end_date = timestampToTime(new Date());
        this.getStartTime(new Date())
        this.getEndTime(new Date())
        this.status = ["0"];
        this.getOrderList();
    },
    methods:{
        selectStatus(){
            this.statusCheckBox=!this.statusCheckBox
            this.status = [];
        },
        getStartTime(val){
            this.start_time = timestampToTime(val)
            this.start_date = timestampToTime(val)
        },
        getEndTime(val){
            this.end_time = timestampToTime(val)
            this.end_date = timestampToTime(val)
        },
        openPicker() {

            this.$refs.picker.open();
        },
        openPic() {
            this.$refs.pic.open();
        },
        ToTime(cjsj){
            let date = new Date(cjsj*1000);
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = date.getDate() + ' '
            var h = date.getHours() + ':'
            var m = date.getMinutes() + ':'
            var s = date.getSeconds()
            return Y+M+D+h+m+s
        },
        getOrderList(){
            const data = {
                token:this.$store.getters.token,
                status:this.status[0],
                start_time:this.start_time+' '+'00:00:00',
                end_time:this.end_time+' '+'23:59:59'
            }
            // console.log(data);
            this.popupVisible = false;
            if(!data.status){
                Toast("请选择需要查询的订单状态");
                return;
            }else if(!data.start_time){
                Toast("请选择需要查询的订单开始日期");
                return;
            }else if(!data.end_time){
                Toast("请选择需要查询的订单结束日期");
                return;
            }
            orderRecord(data).then(res=>{
                console.log(res);
                if(res.code == 200){
                    this.orderList = res.data.list;
                    this.History_money = res.data.History_money
                    this.History_num = res.data.History_num
                }else{
                    Toast("查询出错,请稍后再试")
                }
            })
            
        }
    }
}
</script>
<style scoped>
    .inputBox{
        width: 80%;
        border-radius: 10px;
    }
    .title{
        line-height: 2rem;
    }
    .order_title{
        font-weight: bolder;
        font-size: 1.5rem;
        padding-left: 1rem;
    }
    .hint{
        line-height: 6rem;
        text-align: center;
    }
    .order_cell{
        padding: 0 0.6rem;
    }
    .flex{
        display: flex;
        justify-content: space-between;
    }
    .money{
        color: red;
        font-size: 1.2rem;
        font-weight: bolder;
    }
    .history{
        justify-content: space-around;
        font-size: 1.2rem;
        line-height: 2rem;
        font-weight: bolder;
        text-align: center;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
</style>